<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>
<body>

  <!-- Child:> -->
  nav>ul>li
  <nav>
    <ul>
      <li></li>
    </ul>
  </nav>

  <!-- Sibling:+ -->
  div+p+bq
  <div></div>
  <p></p>
  <blockquote></blockquote>

  <!-- Climb-up:^-->
  div+div>p>span+em^bq
  <div></div>
  <div>
    <p>
      <span></span>
      <em></em>
    </p>
    <blockquote></blockquote>
  </div>

  <!-- Grouping:()-->
  div>(header>ul>li*2>a)+foter>p
  <div>
    <header>
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </header>
    <foter>
      <p></p>
    </foter>
  </div>

  div>(header>ul>li*2>a)+foter>p
  <div>
    <header>
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </header>
    <foter>
      <p></p>
    </foter>
  </div>

  <!-- Multiplecation:*-->
  ul>li*5
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!--Item numbering:$-->
  ul>li.item$*5
  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>

  h$[title=.items$]{Header $}*3
  <h1 title=".items1">Header 1</h1>
  <h2 title=".items2">Header 2</h2>
  <h3 title=".items3">Header 3</h3>

  ul>li.items$$$*5
  <ul>
    <li class="items001"></li>
    <li class="items002"></li>
    <li class="items003"></li>
    <li class="items004"></li>
    <li class="items005"></li>
  </ul>

  ul>li.item$@-*5
  <ul>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
    <li class="item0"></li>
  </ul>

  <!-- ID and CLASS attributes -->
  #header
  <div id="header"></div>

  .title
  <div class="title"></div>

  form#search.wide
  <form id="search" class="wide" action=""></form>

  p.class.class2.class3
  <p class="class class2 class3"></p>

  <!-- Custom attributes-->
  p[title="Hello World"]
  <p title="Hello World"></p>

  td[rowspan=2 colspan=3 title]
  <td rowspan="2" colspan="3" title=""></td>

  [a='value1' b='value2']
  <div a="value1" b="value2"></div>

  <!-- Text -->
  a{Click me}
  <a href="">Click me</a>

  p>{Click }+a{here}+{ to continue}
  <p>
    Click 
    <a href="">here</a>
     to continue
  </p>

  <!-- Impliict tag names -->
  .class
  <div class="class"></div>
  
  em>.class
  <em><span class="class"></span></em>

  ul>.class
  <ul>
    <li class="class"></li>
  </ul>
  
  table>.row>.col
  <table>
    <tr class="row">
      <td class="col"></td>
    </tr>
  </table>


























</body>
</html>
